<template>
  <div>
    <van-nav-bar fixed @click-left="onClickLeft" title="图片分享">
      <template #left>
        <van-icon name="arrow-left" color="#fff">返回</van-icon>
      </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <van-tabs v-model="active" @change="getImages" @click-left="onClickLeft">
      <van-tab v-for="item in tablist" :key="item.id" :title="item.title">
        <div v-for="item in imagelist" :key="item.id" class="smallbox">
          <div class="topbox" @click="clickImage(item.id)">
            <!-- 图片懒加载 -->
            <van-image :src="item.img_url" lazy-load />
            <!-- <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> -->
            <span>
              <p>{{ item.title }}</p>
              <p>{{ item.zhaiyao }}</p>
            </span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前所在tab栏首页
      active: 0,
      // tab栏列表
      tablist: [],
      // 图片列表
      imagelist: []
    };
  },
  created: function() {
    this.getTabList();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 图片列表
    getTabList: async function() {
      const res = await this.$http.get('/api/getimgcategory');
      this.tablist = res.data.message;
      // 缺少的部分加入
      this.tablist.unshift({
        title: '全部',
        id: 0
      });
      this.getImages();
    },
    // 获取所有的图片
    async getImages() {
      // console.log(this.tablist[this.active].id);
      // 当前tab栏所处位置的id
      const id = this.tablist[this.active].id;
      const res = await this.$http.get('/api/getimages/' + id);
      this.imagelist = res.data.message;
    },
    // 点击会跳转到相应的详情页
    clickImage(id) {
      // this.$router.push实现携带参数的跳转
      this.$router.push('/detail/' + id);
    }
  }
};
</script>

<style scoped>
.smallbox {
  width: 355px;
  margin: 10px 10px;
  border-radius: 5px;
  overflow: hidden;
  height: 300px;
  min-height: 200px;
  background-color: orange;
}
.topbox {
  width: 355px;
  height: 300px;
  background-color: pink;
  position: relative;
}
.van-image {
  width: 100%;
  height: 100%;
}
span {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 0 10px;
  height: 75px;
  display: block;
}
p {
  font-size: 12px;
  color: #fff;
}
.van-tabs {
  margin-top: 40px;
}
</style>
